<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" width="80%">
    <div style="padding: 0 20px" v-for="(value, key, index) in list" :key="index">
      <el-checkbox v-model="checkAll[index]" @change="handleCheckAllChange(key, index)"><span style="font-size: 18px">高 {{
        key }} 级</span></el-checkbox><br>
      <!-- <el-checkbox-group v-model="checkedClassInfo[index]" @change="handleCheckedClassInfoChange" > -->
      <!-- <el-checkbox v-for="item in value" :key="item.id" :label="item.name" :checked="getChecked(item.id)">
        <div style="width: 100px">
          {{ item.name }}
          {{ getChecked(item.id) }}
        </div>
      </el-checkbox> -->
      <!-- </el-checkbox-group> -->
      <el-checkbox-group v-model="checkedClassInfo[index]" @change="handleCheckedClassInfoChange">
        <el-checkbox v-for="item in value" :key="item.id" :label="item.id">
          <div style="width: 100px">{{ item.name }}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
import { da } from 'element-plus/es/locale';

export default {
  name: "AddBaseDepartment",
  components: { ElForm, ElMessage },
  data() {
    return {
      name: "",
      placeholder: "",
      departmentId: 0,
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      list: [],
      checkAll: [false, false, false],
      checkedClassInfo: [[], [], []],
      checkData: [],
      personnelType: "",
      addBaseDepartmentForm: {
        leader4: "",
        leader3: "",
        leader2: "",
        leader1: "",
        parentId: "",
        name: "",
        orderNum: "",
        type: "",
        campus: "",
      },
      // 校验规则
      addBaseDepartmentrules: {
        leader4: vxRule(true, null, "blur"),
        leader3: vxRule(true, null, "blur"),
        leader2: vxRule(true, null, "blur"),
        leader1: vxRule(true, null, "blur"),
        name: vxRule(true, null, "blur"),
      },
    };
  },
  watch: {
    // list() {
    //   console.log(this.list);
    //   let arr = []
    //   for (let key in this.list) {
    //     arr.push(this.list[key])
    //   }
    //   if(this.list.length >0 && this.checkedClassInfo.length>0){
    //     console.log('大于');
    //   }

    //   // for (let j = 0; j < arr.length - 1; j++) {
    //   //   for (let i = 0; i < this.checkedClassInfo.length - 1; i++) {;
    //   //     arr.forEach(item => {
    //   //       item.find(val => {
    //   //         console.log('val',j, val.id == this.checkedClassInfo[i][0]);
    //   //       })
    //   //     })
    //   //   }
    //   // }

    // }
  },
  methods: {
    getChecked(id) {
      if (this.checkedClassInfo.length != 0) {
        let arr = []
        this.checkedClassInfo.forEach(item => {
          arr = arr.concat(item)
        })
        return arr.includes(id)
      }
    },
    handleCheckAllChange(key, index) {
      if (this.checkAll[index]) {
        let arr = new Array();
        for (let i = 0; i < this.list[key].length; i++) {
          arr.push(this.list[key][i].id);
        }
        this.checkedClassInfo[index] = arr;
        console.log(this.checkedClassInfo);
      } else {
        this.checkedClassInfo[index] = [];
      }
    },
    handleCheckedClassInfoChange(value) {
      console.log(this.checkedClassInfo);
      console.log("value", value);
    },
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getAllClassByDepartmentId(departmentId) {
      httpService("/javaApi/baseClassInfo/getAllClassByDepartmentId", { departmentId: departmentId }, "get").then(
        (data) => {
          this.checkedClassInfo = data;
          console.log(this.checkedClassInfo);
          // this.checkedClassInfo.forEach(item => {
          //   this.checkData = this.checkData.concat(item)
          // })
        }
      );
    },

    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.checkAll = [false, false, false];
      this.checkedClassInfo = [[], [], []];
      this.checkData = []
    },
    getBaseClassInfoList(gradeId) {
      httpService("/javaApi/baseClassInfo/getAllEffectClass", {
        gradeId: gradeId 
      }, "get").then(
        (data) => {
          this.list = data;
        }
      );
    },
    save() {
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      params.append("departmentId", this.departmentId);
      params.append("departmentName", this.name);
      let classIds = new Array();
      if (this.checkedClassInfo[0]) {

        for (let i = 0; i < this.checkedClassInfo[0].length; i++) {
          classIds.push(this.checkedClassInfo[0][i]);
        }
      }
      if (this.checkedClassInfo[1]) {
        for (let i = 0; i < this.checkedClassInfo[1].length; i++) {
          classIds.push(this.checkedClassInfo[1][i]);
        }
      }
      if (this.checkedClassInfo[2]) {

        for (let i = 0; i < this.checkedClassInfo[2].length; i++) {
          classIds.push(this.checkedClassInfo[2][i]);
        }
      }
      params.append("classIds", classIds);
      httpService("/javaApi/baseClassInfo/editDepartmentBatch", params, "post").then(
        (data) => {
          if (data.code == 200) {
            ElMessage.success(data.object);
            this.clear()
          } else {
            ElMessage.error(data.message);
          }
        }
      );
    },
  },
};
</script>
<style></style>